<template>
	<view class="content">
		<view style="font-weight: bold;font-size: 36rpx;margin-bottom: 40rpx;margin-top: 30rpx;">
			消息提示音
		</view>
		<view v-for="(item,k) in list"
			style="display: flex;align-items: center;justify-content: space-between;margin-top: 1rpx;padding: 15rpx;background: white;border-radius: 12rpx;">
			<view style="display: flex;align-items: center;">
				<image @click="playm(item)" src="/static/images/playm.png" style="width: 46rpx;height: 46rpx;" mode="">
				</image>
				<view style="margin-left: 12rpx;">
					{{item.name}}
				</view>
			</view>
			<view class="" @click="ckitem(item)">
				<image v-if="item.name == msgmusic" src="/static/images/checked.png" style="width: 42rpx;height: 42rpx;"
					mode=""></image>
				<image v-else src="/static/images/check.png" style="width: 42rpx;height: 42rpx;" mode=""></image>
			</view>
		</view>

		<view
			style="display: flex;align-items: center;justify-content: space-between;margin-top: 10rpx;padding: 15rpx;background: white;border-radius: 12rpx;">
			<view style="display: flex;align-items: center;">
				<image src="/static/images/mmute.png" style="width: 46rpx;height: 46rpx;" mode=""></image>
				<view style="margin-left: 12rpx;">
					静音
				</view>
			</view>
			<view class="" @click="ckitemd">
				<image v-if="!msgmusic" src="/static/images/checked.png" style="width: 42rpx;height: 42rpx;" mode="">
				</image>
				<image v-else src="/static/images/check.png" style="width: 42rpx;height: 42rpx;" mode=""></image>
			</view>
		</view>

		<view style="width: 46%;padding: 25rpx;padding-top: 0rpx;margin: 160rpx auto;">
			<u-button @click="saveuser" type="primary">确定</u-button>
		</view>
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				list: [{
						url: 'qk.mp3',
						name: '轻快'
					},
					{
						url: 'lx.mp3',
						name: '流行'
					},
					{
						url: 'dc.mp3',
						name: '短促'
					},
					{
						url: 'qr.mp3',
						name: '轻柔'
					}
				],
				msgmusic: ''
			}
		},
		onLoad() {
			this.msgmusic = this.$store.state.user.user.msgmusic
		},
		onHide() {
			innerAudioContext.stop()

		},
		methods: {
			ckitem: function(item) {
				this.msgmusic = item.name
			},
			ckitemd: function() {
				this.msgmusic = ''
			},
			playm: function(item) {
				innerAudioContext.stop()
				innerAudioContext.src = `/static/music/${item.url}`
				innerAudioContext.play()
			},
			saveuser: function() {
				this.$u.put(`bgyx/bgyx/putdata/user`,{
					msgmusic: this.msgmusic,
					id:this.$store.state.user.user.id
				})
				this.$store.commit(`user/setUserData`, {
					msgmusic: this.msgmusic
				})
				uni.navigateBack()
			},
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #f9f9f9;
		padding: 25rpx;
	}
</style>